<template>
    <div class="common">
        <innerCommon 
            :location="location"
        >
            <template slot="left">
                <span>联盟介绍</span>
            </template>
            <div slot="right">
                <a-button type="primary" v-if="content" @click="editAlliance()">修改</a-button>
            </div>
            <div slot="table">
                <div v-if="content&&isShow==false" class="content">
                    <div v-html="content"  class="ql-editor"></div>
                </div>
                <a-empty
                    v-if="!content&&isShow==false"
                     description="暂无内容"
                >
                    <a-button type="primary" @click="isShow=true">
                    新增
                    </a-button>
                </a-empty>
                <div class="form" v-if="isShow">
                    <eform
                        :formData="formData"
                        class="form"
                        ref="form"
                        :fields="fields"
                        
                    >
                        <div slot="content">
                            <eQuill
                                @getQuillContent="getQuillContent"
                                v-decorator="['content',{rules: [{ required: true, message: '请输入联盟内容' }]}]"
                                :defaultData="quillInfo"
                            ></eQuill>
                        </div>
                    </eform>
                    <div class="submitBtn">
                        <a-button @click="cancel()">取消</a-button>
                        <a-button type="primary" @click="save()">保存</a-button>
                    </div>
                </div>
            </div>
        </innerCommon>
    </div>
</template>
<script>
import {updateAllianceIntroductionApi,getAllianceApi} from "@/request/api"
import innerCommon from "@/components/common/innerCommon"
import eQuill from "@/components/common/eQuill"
import eform from "@/components/common/form"
export default {
    name:"allianceIntrodution",
    components:{innerCommon,eQuill,eform},
    created(){
        this.init()
        this.location=[{
            name:"产教融合",
            path:''
        },{
            name:"联盟介绍",
            path:'/allianceIntroduction'
        }]
    },
    data(){
        const formData=[{
            label:"联盟介绍",
            scopedSlots: { customRender: 'content'},
        }]
        return{
            location:[],
            formData,
            quillInfo:'',
            fields:null,
            content:'',
            isShow:false,
            allianceId:null
        }
    },
    methods:{
        init(){
            this.getToken(getAllianceApi,{},res=>{
                this.content=res.data.content
                this.allianceId=res.data.id
            })
        },
        getQuillContent(val){
            this.quillInfo=val
            this.$refs.form.form.setFieldsValue({['content']:val})
        },
        cancel(){
            this.$confirm({
                title: '确认取消吗?',
                cancelText:"取消",
                okText:'确定',
                onOk:()=>{
                    this.isShow=false
                },
                onCancel() {
                },
            });
        },
        editAlliance(){
            this.isShow=true
            this.quillInfo=this.content
        },
        save(){
            this.$refs.form.form.validateFields().then(res=>{
                this.getToken(updateAllianceIntroductionApi,{...res,'id':this.allianceId},data=>{
                    this.$message.success(data.message)
                    this.isShow=false
                    this.init()
                })
            })
        }
    }
}
</script>
<style lang="stylus" scoped>
.submitBtn
    display:flex;
    justify-content:center;
    button  
        width:200px;
        &:nth-child(1)
            margin-right:10px;
.content
    width:1200px;
    margin:0 auto;
    border:1px solid #ddd;
    text-align:justify;
    padding:20px;
</style>